<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="images/yc.png" style="image/x-icon">
	<link rel="stylesheet" href="../css/layui.css"  media="all">
	<!-- 注意：如果你直接复制所有代码到本地，上述 css 路径需要改成你本地的 -->	
</head>
<body>

<div id="mem-app" class="mem-table">
	<div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-block">
              <input type="number" name="mno" id="mno"  placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
              <input type="text" name="nickName" id="nickName" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-block">
              <input type="text" name="tel" id="tel" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline"> 
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
              <select name="rolename" lay-filter="LAY-user-adminrole-type">
                <option value="0">冻结</option>
                <option value="1">正常</option>
              </select>
            </div>
          </div>
          <!-- 搜索按钮 -->
          <div class="layui-inline">
          	<!--  新增 id="mem-search" -->
            <button class="layui-btn layuiadmin-btn-admin" data-type="reload" lay-filter="mem-search" id="mem-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn" ></i>
            </button>
          </div>
        </div>
      </div>
	
	<!--  渲染数据的表格   layui初始化需要的table  -->
	<table class="layui-hide" id="LAY_table_mem" lay-filter="mem"></table> 
	
</div>

<!-- 头工具 -->
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
		<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
		<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
	</div>
</script>

<!-- 行工具 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="repwd">重置密码</a>
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-xs layui-btn-danger " lay-event="del">删除</a>
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script src="../js/layui.all.js" charset="utf-8"></script>
 
<script>
layui.use('table', function(){
	  var table = layui.table
	  ,$ = layui.jquery;
	  
	  //第一个实例 绑定表格  自动化渲染方法级
	  table.render({
	    elem: '#LAY_table_mem'   //绑定的表格元素ID
	    ,url:'../../mem/findByPageFirst'   //数据接口 后台访问接口
	    ,method:'post' //请求方式
	    ,page: true  //开启分页
	    ,limit: 2 //默认第一页显示数量
	    ,limits:[2, 3, 5] //可以选择每页显示的数量
	    ,toolbar:'#toolbarDemo' //开启头部工具栏 并为其绑定左侧模板
	    ,defaultToolbar:[{
	    	title:'添加'
	    	,layEvent:'add'
	    	,icon:'layui-icon-add-1'
	    },'filter','exports','print',{ //自定义头部工具栏右侧图标 如无需自定义，去除该参数即可
	    	title:'提示'
		    ,layEvent:'LAYTABLE_TIPS'
		    ,icon:'layui-icon-tips'
	    }]
	    ,response:{
	    	statusCode:200  //重新规定成功的状态码为200， table 组件默认为0
	    }
	    ,parseData: function(res){  //将原始数据解析成table  组件所规定的shuju
	    	return {
	    	"code": 200, //解析接口状态
	    	"msg":"", //解析提示文本
	    	"count": res.code, //解析数据长度
	    	"data":res.data, //解析数据列表
	   	  };
	    }
	    ,cols: [[  //表头
	    	{checkbox:true, fixed:true}
	      ,{field:'mno',title:'会员编号', width:120, sort: true, fixed: 'left', align:'center'}
	      ,{field:'nickName', width:120, title: '会员昵称',align:'center', edit:'text'}
	      ,{field:'realName', width:120, title: '姓名',align:'center', edit:'text', templet:function(res){
	    	  return res.realName == ''? '未知' : res.realName;
	      }}
	      ,{field:'tel', width:120, title: '联系方式', edit:'text'}
	      ,{field:'email', title: '邮箱', width: 200,edit:'text',templet:function(res){
	    	  return '<em>' + res.email + '</em>';
	      }} 
	      ,{field:'regDate', title: '加入时间', width: 200, sort: true}
	      ,{field:'status', title: '状态',  width: 200, templet:function(res){
	    	  return res.status == 1 ?
	    			  '<button type="button" class="layui-btn">正常</button>' :
	    			  '<button type="button" class="layui-btn layui-btn-danger">冻结</button>'
	      }}
	      
	      ,{fixed:'right',title:'操作',toolbar:'#barDemo',width: 200,align:'center'}
	    ]]
	    ,page:{//支持传入laypage组件的所有参数
	    	layout:['limit','count','prev','page','next','skip']//自定义分页布局
	    	,groups:1 //只显示1个连续页码
	    	,first:false //不显示首页
	    	,last:false //不显示尾页
	    }
	  });
	  
	  //头部工具栏事件
	  table.on('toolbar', function(obj){
		  var checkStatus = table.checkStatus(obj.config.id);
	      switch(obj.event){
	     	case 'getCheckData':
	     		 var data = checkStatus.data;
	     		 layer.alert(JSON.stringify(data));
	     	break;
	     	case 'getCheckLength':
	     		 var data = checkStatus.data;
	     		 layer.msg('选中了：'+ data.length + '个');
	     	break;
	     	
	     	//自定义头工具栏右侧图标 - 提示
	     	case'add':
	     		layer.msg('添加');
	     	break;
	     	case'LAYTABLE_TIPS':
	     		layer.alert('这是工具栏右侧自定义的一个图标按钮');
	     	break;
	      };
	  });
	  
	  //监听行工具事件 注： 是工具条事件名， test是table原始容器的属性
	  table.on('tool',function(obj){
		  var data = obj.data  //获取当前行的数据
		  ,layEvent = obj.event; //获取lay-event对应的值
		  console.log(obj);
		  switch( layEvent ){
		      case 'repwd':  //重置密码
		      	layer.confirm("您确定要重置为初始密码吗？",function(index){
		      		var mno = data.mno;
		      		//发送请求
		      		$.post("../../mem/resetPwd", {mno: mno}, data=>{
		      			data = parseInt( $.trim(data));
		      			if(data>0){
		      				layer.alert("重置密码成功,初始密码已经改为会员注册<span style='color:red'>手机号码的后6位</span>,请及时提醒用户更改");
		      				return;
		      			}
		      		},'text')
		      		layer.close(index); //关闭弹出框
		      	})
		      	break;
		      case 'del':
		    	  layer.confirm("您确定要删除这条数据吗？",function(index){
			      		obj.del(); //对应的行tr的DOM结构
			      		layer.close(index); //关闭弹出框
			      	})
			      	break;
		      case'edit':
		    	  layer.prompt({
		    		  fromType:0 //输入对的类3型
		    		  ,value:
		    			  data.status == '1' ? '0' : '1' //默认空字符串
		    	  },function(value, index){
		    		  var mno = data.mno;
		    		  //发送请求
		    		  $.post("../../mem/update", {mno: mno, status: value}, data=>{
		      			data = parseInt( $.trim(data));
	      				if(data > 0){
	      					obj.update({		//同步更新缓存对应的值 渲染界面
	      						status:value
	      					});
		      				layer.alert('会员状态修改成功');
		      				layer.close(index);
		      				return;
		      			}
		      		}, 'text')
		      		layer.alert("会员状态修改失败，请稍候重试");
		      		layer.close(index); //关闭弹出框
		    	  });
		    	  break;
		  }
	  });
	  
	  //查询按钮功能 方法级渲染的重载 只重载数据
	  var $ = layui.$, active = {
		 reload: function(){
			  //获得查询条件
			  var mno = $('#mno').val().trim();
			  var tel = $('#tel').val().trim();
			  var nickName = $('#nickName').val().trim();
			  var status = $('#status').val();
			  
			  //执行重载 
			  table.reload('LAY_table_mem', {  //指定的数据表格
				  url: '../../mem/findByPage'
				  ,page:{
					  curr:1  //重新从第一页开始
				  }
				  ,where:{	//设定异步数据接口的额外参数，任意设置
					  mno:mno,
					  tel:tel,
					  nickName:nickName,
					  status:status,
				  }
			  },'data');
			  $("#mem-app input").val(''); //清空查询数据
		  }
	  };
	  
	  //绑定搜索点击事件
	  $('#mem-search').on('click',function(){
		  var type = $(this).data('type'); 
		  active[type] ? active[type].call(this) : '';  //对应函数
	  });	  
	});
</script>
</body>
</html>